@page "/HorizontalScroll"

@using FluentUI.Demo.Shared.Pages.HorizontalScroll.Examples

<h1>Horizontal Scroll</h1>

<p>An implementation of a content scroller as a web-component.</p>
<p><code>&lt;FluentHorizontalScroll&gt;</code> wraps the <code>&lt;fluent-horizontal-scroll&gt;</code> element, a web component implementation of a horizontal scroller leveraging the Fluent UI design system.</p>

<h2 id="example">Examples</h2>

<div>
    <DemoSection Title="Default" Component="@typeof(HorizontalScrollDefault)"></DemoSection>

    <DemoSection Title="Full width cards" Component="@typeof(HorizontalScrollFullWidth)" CollocatedFiles="@(new[] {"css"})"></DemoSection>

    <DemoSection Title="Slow scroll" Component="@typeof(HorizontalScrollSlow)"></DemoSection>

    <DemoSection Title="Gradients" Component="@typeof(HorizontalScrollGradients)" CollocatedFiles="@(new[] {"css"})"></DemoSection>

    <DemoSection Title="Sizing" Component="@typeof(HorizontalScrollSizing)" CollocatedFiles="@(new[] {"css"})"></DemoSection>
    
    <DemoSection Title="External Navigation" Component="@typeof(HorizontalScrollExternalNavigation)"></DemoSection>
</div>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentHorizontalScroll)" />
